<template>
  <div class="container">
    <el-row type="flex" justify="space-between">
      <!-- 订单表单 -->
      <div class="main">
        <!-- 使用订单表单组件 -->
        <!-- 同样，请求机票信息是个异步操作，但是页面渲染时，先加载子组件，会出现子组件未加载完获取不到数据的现象 -->
        <OrderForm v-if="flightInfo.insurances" :ticketData="flightInfo" @getPrice="dealPrice" />
        <!-- @getPrice监听orderForm 传过来的数据 -->
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <!-- 购买的机票展示 -->
        <OrderAside v-if="flightInfo.insurances" :ticketData="flightInfo" :allPrice="totalPrice" />
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flightInfo: {},  //（选定）购买的机票信息-对象
      totalPrice: 0,       //定义总价格，父传子 -- 把总价传给orderAside.vue
    }
  },
  mounted() {
    // console.log(this.$route.query);
    let { id, seat_xid } = this.$route.query
    // 发送请求，获取选定（购买）的机票信息数据
    this.$axios({
      url: `/airs/${id}`,
      params: { seat_xid }
    }).then(res => {
      console.log(res);
      this.flightInfo = res.data
    })
  },
  methods: {
    // 处理orderForm 传过来的数据
    dealPrice(data) {
      this.totalPrice = data;
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 20px auto;
}

/*aside*/
.aside {
  width: 350px;
  height: fit-content;
  border: 1px #ddd solid;
}
</style>